<!--表格操作栏-->
<eui-panel [collapsible]="true" [collapsed]="true"
           [panelStyle]=""
           [headerStyle]="{padding: '2px 0px'}"
           [bodyStyle]="{padding:'10px 0px'}"
           [footerStyle]="{padding:'5px 0px', marginBottom:'1px', marginTop:'1px'}">
  <eui-panel-header>
    <div class="f-row text-center">
      <div class="f-full"><h3>{{componentTitle}}</h3></div>
    </div>
  </eui-panel-header>
  <div class="container-fluid">
    <div class="row">
      <div class="col-3 form-inline">
        <label for="name">姓名：</label>
        <input type="text" class="form-control" id="name" name="name" [(ngModel)]="itemForPage.name">
      </div>
      <div class="col-3 form-inline">
        <label for="phone">号码：</label>
        <input type="text" class="form-control" id="phone" name="phone" [(ngModel)]="itemForPage.phone">
      </div>
      <div class="col-3 form-inline">
        <label for="email">邮箱：</label>
        <input type="text" class="form-control" id="email" name="email" [(ngModel)]="itemForPage.email">
      </div>
      <div class="col-3 form-inline">
        <label for="sex">性别：</label>
        <select class="form-control" id="sex" name="sex" [(ngModel)]="itemForPage.sex">
          <option value="all">所有</option>
          <option value="{{item.value}}" *ngFor="let item of [{value:'male',name:'男'},{value:'female',name:'女'}];">
            {{item.name}}
          </option>
        </select>
      </div>
    </div>
    <div class="row" style="height: 10px;"></div>
    <div class="row">
      <div class="col-3">
        <label align="left" [for]="loginTime">登陆时间：</label>
        <eui-datetimespinner #loginTime format="yyyy-MM-dd HH:mm:ss" [(ngModel)]="itemForPage.loginTime" style="width: 14.2em;height: 38px;">
        </eui-datetimespinner>
      </div>
      <div class="col-3">
        <label align="left" [for]="createTime">注册时间：</label>
        <eui-datetimespinner #createTime format="yyyy-MM-dd HH:mm:ss" [(ngModel)]="itemForPage.createTime" style="width: 14.2em;height: 38px;">
        </eui-datetimespinner>
      </div>
    </div>
  </div>
  <eui-panel-footer>
    <eui-linkbutton iconCls="icon-add" [plain]="true" (click)="onOpenEditDlg('add')">添加</eui-linkbutton>
    <eui-linkbutton iconCls="icon-remove" [plain]="true" (click)="onOpenDeleteDlg('deleteMore')">删除</eui-linkbutton>
    <eui-linkbutton iconCls="icon-cancel" [plain]="true" (click)="onOpenDeleteDlg('deleteAll')">清空数据</eui-linkbutton>
    <eui-menubutton iconCls="icon-print" [plain]="true" [menu]="excelMenu">Excel表格</eui-menubutton>
    <eui-linkbutton iconCls="icon-reload" [plain]="true" (click)="onReLoad()">刷新</eui-linkbutton>
    <eui-menu #excelMenu (itemClick)="excel($event)">
      <eui-menu-item text="导入(xls、xlsx)" iconCls="icon-redo" value="import"></eui-menu-item>
      <eui-menu-sep></eui-menu-sep>
      <eui-menu-item text="导出(xls)" iconCls="icon-undo" value="export"></eui-menu-item>
    </eui-menu>
    <div style="display: inline-block;float: right;">
      <eui-linkbutton iconCls="icon-search" [plain]="true" (click)="onScreening()">查询</eui-linkbutton>
      <eui-linkbutton iconCls="icon-clear" [plain]="true" (click)="onResetScreening()">清空条件</eui-linkbutton>
    </div>
  </eui-panel-footer>
</eui-panel>

<!--表格-->
<eui-datagrid [pagination]="true" [lazy]="true" [data]="data" [total]="total" idField="id"
              [pageNumber]="pageNumber" [pageSize]="pageSize" [pageOptions]="pageOptions"
              [rowCss]="setRowCss" [loading]="loading" [loadMsg]="loadMsg"
              selectionMode="multiple" [(selection)]="selectRow" (rowDblClick)="onOpenEditDlg($event)"
              (pageChange)="onPageChange($event)">
  <!--1-->
  <eui-grid-column-group frozen="true" align="left" width="710">
    <eui-grid-header-row>
      <eui-grid-column cellCss="datagrid-td-rownumber" title="序号" align="center" frozen="true" width="100">
        <ng-template euiCellTemplate let-rowIndex="rowIndex">{{rowIndex + 1}}</ng-template>
      </eui-grid-column>
      <eui-grid-column field="name" title="姓名" frozen="true" width="80"></eui-grid-column>
      <eui-grid-column field="sex" title="性别" [cellCss]="setSexCellCss" align="center" frozen="true" width="40">
        <ng-template euiCellTemplate let-row>
          <div *ngIf="row.sex=='male'">男</div>
          <div *ngIf="row.sex=='female'">女</div>
        </ng-template>
      </eui-grid-column>
      <eui-grid-column field="phone" title="手机号码" align="center" frozen="true" width="150"></eui-grid-column>
      <eui-grid-column field="email" title="邮箱" frozen="true" width="180"></eui-grid-column>
      <eui-grid-column field="hobby" title="爱好" frozen="true" width="180"></eui-grid-column>
    </eui-grid-header-row>
  </eui-grid-column-group>
  <!--2-->
  <eui-grid-column-group>
    <eui-grid-header-row>
      <eui-grid-column field="province" title="省" width="80"></eui-grid-column>
      <eui-grid-column field="city" title="市" width="150"></eui-grid-column>
      <eui-grid-column field="area" title="区/县" width="180">
        <ng-template euiCellTemplate let-row>
          <div *ngIf="row.area!='-1'">{{row.area}}</div>
        </ng-template>
      </eui-grid-column>
      <eui-grid-column field="address" title="地址" width="400"></eui-grid-column>
    </eui-grid-header-row>
  </eui-grid-column-group>
  <!--3-->
  <eui-grid-column-group frozen="true" align="right" width="320">
    <eui-grid-header-row>
      <eui-grid-column field="loginTime" title="登陆时间" align="center"></eui-grid-column>
      <eui-grid-column field="createTime" title="注册时间" align="center"></eui-grid-column>
    </eui-grid-header-row>
  </eui-grid-column-group>
  <!--<eui-grid-column title="操作" align="center" width="120">-->
  <!--<ng-template euiCellTemplate let-row let-rowIndex="rowIndex">-->
  <!--<eui-linkbutton iconCls="icon-edit" [plain]="true">编辑</eui-linkbutton>-->
  <!--<eui-linkbutton iconCls="icon-remove" [plain]="true">删除</eui-linkbutton>-->
  <!--</ng-template>-->
  <!--</eui-grid-column>-->
  <!--<ng-template euiPageTemplate let-pager>-->
  <!--<eui-linkbutton plain="true" iconCls="icon-add"></eui-linkbutton>-->
  <!--<eui-linkbutton plain="true" iconCls="icon-remove"></eui-linkbutton>-->
  <!--<eui-textbox iconCls="icon-search" style="height:26px;margin-left:4px"></eui-textbox>-->
  <!--</ng-template>-->
</eui-datagrid>

<!--添加、编辑弹框-->
<eui-dialog [closed]="editDlgClosed" [closable]="true" [modal]="true" (close)="onDlgClose()"
            [panelStyle]="{width:'60%',textAlign:'center'}" [headerStyle]="{padding:'10px 0px'}"
            [bodyStyle]="{padding:'5px 2px'}"
            [footerStyle]="{padding: '10px 0px'}">
  <eui-panel-header><h4>{{editDlgTitle}}</h4></eui-panel-header>
  <div class="container user">
    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" style="margin: 0 auto;"><!--自适应设置-->
      <form role="form" novalidate [formGroup]="itemForForm" (ngSubmit)="onSubmitForm(itemForForm)">
        <!--姓名-->
        <div class="form-group user-field">
          <i class="fa fa-user fa-lg"></i>
          <input type="text" class="form-control" formControlName="name"
                 placeholder="{{placeholder.name.title}}{{placeholder.name.prompt}}">
        </div>
        <!--手机号码-->
        <div class="form-group user-field">
          <i class="fa fa-phone fa-lg"></i>
          <input type="text" class="form-control" formControlName="phone"
                 placeholder="{{placeholder.phone.title}}{{placeholder.phone.prompt}}">
        </div>
        <!--邮箱-->
        <div class="form-group user-field">
          <i class="fa fa-envelope-o fa-lg"></i>
          <input type="text" class="form-control" formControlName="email"
                 placeholder="{{placeholder.email.title}}{{placeholder.email.prompt}}">
        </div>
        <!--性别-->
        <div class="form-group text-left">
          <div class="form-check form-check-inline">
            <label class="form-check-label">性别:</label>
          </div>
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input type="radio" class="form-check-input mgr mgr-sm" formControlName="sex" value="male"/> 男
            </label>
          </div>
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input type="radio" class="form-check-input mgr mgr-sm" formControlName="sex" value="female"/> 女
            </label>
          </div>
        </div>
        <!--爱好-->
        <div class="form-group text-left" *ngIf="hobby">
          <div class="form-check form-check-inline">
            <label class="form-check-label">爱好:</label>
          </div>
          <div class="form-check form-check-inline" *ngFor="let item of hobby;let i = index;">
            <label class="form-check-label">
              <input type="checkbox" class="form-check-input mgc mgr-sm" formControlName="hobby{{i+1}}"
                     value="{{item.name}}"
                     (change)="onChangeHobby($event.target)"> {{item.name}}
            </label>
          </div>
        </div>
        <!--地址-->
        <div class="form-group row">
          <div class="col-2" *ngIf="levelOne">
            <select class="form-control" formControlName="province" (change)="onChangeLevelOne($event.target)">
              <option value="0">请选择省</option>
              <option value="{{item.name}}" *ngFor="let item of levelOne;">{{item.name}}</option>
            </select>
          </div>
          <div class="col-2" *ngIf="levelTwo">
            <select class="form-control" formControlName="city" (change)="onChangeLevelTwo($event.target)">
              <option value="0">请选择市</option>
              <option value="{{item.name}}" *ngFor="let item of levelTwo;">{{item.name}}</option>
            </select>
          </div>
          <div class="col-2" *ngIf="levelThree">
            <select class="form-control" formControlName="area" (change)="onChangeLevelThree($event.target)">
              <option value="0">请选择区</option>
              <option value="{{item.name}}" *ngFor="let item of levelThree;">{{item.name}}</option>
            </select>
          </div>
          <div class="col-6">
            <div class="user-field">
              <i class="fa fa-home fa-lg"></i>
              <input type="text" class="form-control" formControlName="address"
                     placeholder="{{placeholder.address.title}}{{placeholder.address.prompt}}">
            </div>
          </div>
        </div>
        <!--头像-->
        <div class="form-group row">
          <div class="col">
            <select class="form-control" formControlName="cover">
              <option value="0">请选择头像</option>
              <option value="../../../assets/img/cover/male.png">系统默认（男）</option>
              <option value="../../../assets/img/cover/female.png">系统默认（女）</option>
              <option value="{{item.src}}" *ngFor="let item of covers;">{{item.name}}</option>
            </select>
          </div>
        </div>
        <!--自我介绍-->
        <div class="form-group">
        <textarea class="form-control" rows="3" formControlName="introduce"
                  placeholder="{{placeholder.introduce.title}}{{placeholder.introduce.prompt}}"></textarea>
        </div>
      </form>
    </div>
  </div>
  <!--提交按钮-->
  <!--itemForForm.controls['hobby'].value==''-->
  <eui-panel-footer>
    <button type="button" class="btn" (click)="onSubmitForm(itemForForm)"
            [disabled]="formBtnDisabled||itemForForm.controls['hobby'].value.length==0||itemForForm.invalid">保存
    </button>&nbsp;&nbsp;
    <button type="button" class="btn" (click)="onEditCancel()">取消</button>
    <!--<div>校验结果:{{itemForForm.invalid}}</div>-->
    <!--<div>name: {{itemForForm.controls['name'].invalid}}</div>-->
  </eui-panel-footer>
</eui-dialog>

<!-- 上传Excel弹框  -->
<eui-dialog [title]="upExcelDlgTitle" [closed]="upExcelDlgClosed" [closable]="true" [modal]="true"
            (close)="onDlgClose()"
            [panelStyle]="{width:'400px'}">
  <eui-filebutton style="width:100%;" btnCls="c6" [autoUpload]="false" [multiple]="false" [fileId]="'upExcelFile'"
                  accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                  (select)="onFileSelect($event)">选择文件(.xls或.xlsx格式,大小5M以内)
  </eui-filebutton>
</eui-dialog>
